<template>
	<view class="container">
		<!-- 顶部导航栏 -->
		<view class="header">
			<x-status-bar></x-status-bar>
			<view class="flex-center-between header-navbar">
				<x-back-btn></x-back-btn>
				<view class="u-f-40 common-title">{{ lang_personal.accountBalance }}</view>
				<view class="u-f-32 u-lh-44" @click="jumpUrl('/pages/user/personal/bill/bill')">
					{{ lang_personal.billInfo }}</view>
			</view>
		</view>

		<view class="u-m-t-72 u-text-center">
			<view>
				<image src="@/static/image/common/gold.png" style="width: 112rpx; height: 112rpx;" class="clear-flex">
				</image>
			</view>

			<view class="u-m-t-64 u-f-32 u-lh-44">{{ lang_personal.myBalance }}</view>

			<view class="flex-center-center">
				<view class="flex-baseline u-m-t-14 u-f-60 u-lh-70 font-bold">
					<view class="u-f-40">{{ lang_unit.money }}</view>
					<view>{{ balance }}</view>
				</view>
			</view>

			<view class="flex-center-center">
				<view class="flex-center u-m-t-22" @click="transformAction(1)">
					<view class="u-m-r-8 u-f-28 u-lh-40 color-grew">{{ lang_personal.transformScore }}</view>
					<u-icon name="right" custom-prefix="u" size="24" color="#ACACAC"></u-icon>
				</view>
			</view>
		</view>

		<x-fixed-bottom>
			<view style="padding-bottom: 200rpx;">
				<view class="flex-center-center">
					<x-common-btn width="348" height="90" background="#FD1E43" @click="transformAction(2)" :disabled="!balanceList.length">
						<view class="u-f-36 u-lh-50">{{ lang_personal.recharge }}</view>
					</x-common-btn>
				</view>

				<view class="u-m-t-34 flex-center-center">
					<x-common-btn width="348" height="90" color="#191A1B" background="#F9F9F9"
						@click="jumpUrl('/pages/user/personal/balance/withdrawal/index?type=withdrawal')">
						<view class="u-f-36 u-lh-50">{{ lang_personal.withdrawal }}</view>
					</x-common-btn>
				</view>
			</view>
		</x-fixed-bottom>

		<!-- 兑换积分弹窗 -->
		<x-popup v-model="visible" mode="bottom" z-index="999999" @close="visible = false">
			<view class="score-container u-p-t-38">
				<!-- 头部 -->
				<view class="score-header flex-between">
					<view></view>
					<view class="common-title u-text-center u-f-36 u-lh-50 font-medio">
						{{ lang_personal[transformType === 1 ? 'transformScore' : 'rechargeBalance'] }}</view>
					<image src="@/static/image/common/close_grew.png" style="width: 30rpx; height: 28rpx;"
						class="clear-flex" @click="visible = false"></image>
				</view>
				<view class="flex-center-center u-m-t-12 u-m-b-28">
					<view class="flex-center">
						<view class="u-m-r-10 u-f-28 u-lh-40 color-grew">
							{{ lang_personal[transformType === 1 ? 'currentScore' : 'currentBalance'] }}:</view>
						<view v-if="transformType === 1" class="u-f-32 u-lh-40 font-bold">{{ integral }}</view>
						<view v-else class="flex-baseline font-bold">
							<view class="u-f-20 u-lh-40">{{ lang_unit.money }}</view>
							<view class="u-f-32 u-lh-40">{{ balance }}</view>
						</view>
					</view>
				</view>

				<!-- 分割线 -->
				<u-gap height="3" bgColor="#F9F9F9"></u-gap>

				<!-- 积分选项 -->
				<view style="padding: 10rpx 46rpx 0; margin: 22rpx 0 28rpx;">
					<u-row :gutter="12">
						<u-col v-for="(item, index) in dataList" :key="index" :span="4">
							<view :class="['score-item-card u-text-center u-m-t-18',
							dataIndex === index ? 'score-item-card-active' : '']" @click="dataIndex = index">
								<view class="u-p-t-24 u-f-56 u-lh-64 font-bold ">{{ item.label }}</view>
								<view class="u-f-24 u-lh-34 color-grew">
									{{ lang_personal[transformType === 1 ? 'canTransformScore' : 'rechargeBalance'] }}
								</view>
								<view class="u-p-t-24 u-f-30 u-lh-34 color-grew font-bold">
									{{ lang_unit.money }}{{ item.subLabel.toFixed(2) }}
								</view>
							</view>
						</u-col>
					</u-row>
				</view>

				<!-- 分割线 -->
				<u-gap height="1" bgColor="#f9f9f9"></u-gap>

				<!-- 充值方式选项 -->
				<view>
					<view class="pay-item font-medio flex-center-between">
						<view v-if="transformType === 1" class="flex-center">
							<image src="@/static/image/common/gold.png" style="width: 36rpx; height: 36rpx;"
								class="clear-flex u-m-r-16"></image>
							<view class="flex-center">
								<view style="color: #7F8083;">{{ lang_personal.myBalance }}:</view>
								<view class="u-m-l-10 color-red">{{ lang_unit.money }}{{ balance }}</view>
							</view>
						</view>
						<view v-else class="flex-center">
							<image src="@/static/image/common/paypal.png" style="width: 30rpx; height: 36rpx;"
								class="clear-flex u-m-r-16"></image>
							<view style="color: #7F8083;">PayPal</view>
						</view>

						<image src="@/static/image/common/circle_checked.png" style="width: 32rpx; height: 32rpx;"
							class="clear-flex"></image>
					</view>
				</view>

				<view class="flex-center-center" style="margin: 26rpx 0 0; padding: 0 0 40rpx;">
					<x-common-btn @click="rechargeAction" :disabled="transformType === 1 && balance < currentTransObj.money">
						<view>{{ lang_personal.recharge }}</view>
					</x-common-btn>
				</view>

				<!-- 充值协议 -->
				<view class="flex-center-center" style="margin: 26rpx 0 0; padding: 0 0 40rpx;">
					<view class="u-f-24 u-lh-34 flex-center">
						<view>充值即默认同意</view>
						<view style="color: #1577FF;" @click="jumpUrl(`/pages/other/richText/richText?type=exchange`)">《用户兑换协议》</view>
					</view>
				</view>
			</view>
		</x-popup>
	</view>
</template>

<script>
	import {
		goodsPage
	} from '@/api/user/goods.js'
	import {
		orderCreateRecharge
	} from '@/api/user/order.js'
	import {
		walletExchangeIntegralList,
		walletExchange
	} from '@/api/user/wallet.js'
	import { payAction } from '@/utils/pay.js'
	export default {
		data() {
			return {
				integralList: [],
				balanceList: [],
				dataIndex: 0,

				transformType: 1, // 1积分 2余额
				visible: false
			}
		},
		computed: {
			dataList() {
				return this.transformType === 1 ? this.integralList : this.balanceList
			},
			currentTransObj() {
				return this.dataList[this.dataIndex] || {}
			}
		},
		onLoad() {
			this.initBalanceList()
			this.initWalletList()
		},
		methods: {
			// 打开兑换弹框
			transformAction(type = 1) {
				this.dataIndex = 0
				this.transformType = type
				this.visible = !!(type === 1 ? this.integralList : this.balanceList).length
			},
			// 表单提交
			rechargeAction() {
				let item = this.currentTransObj
				if (this.transformType === 1) {
					walletExchange({
						exchangeIntegralId: item.id
					}).then(() => {
						this.visible = false
						this.$store.dispatch('initUserData')
					})
				} else {
					orderCreateRecharge({
						goodsId: item.goodsId,
						remark: '余额充值',
						buyAmount: 1
					}).then((data) => {
						payAction(3, data).then((data) => {
							this.visible = false
						})
					})
				}
			},
			// 初始化兑换积分
			initWalletList() {
				walletExchangeIntegralList({}).then((data) => {
					this.integralList = data.map(item => ({
						...item,
						label: item.integral,
						subLabel: item.money
					}))
				})
			},
			// 初始化余额列表
			initBalanceList() {
				goodsPage({
					goodsType: 6
				}).then((data) => {
					this.balanceList = data.list.map(item => ({
						...item,
						label: item.rechargeValue,
						subLabel: item.discountPrice
					}))
					console.log(data)
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.score {
		&-header {
			position: relative;
			padding: 0 32rpx;
		}

		&-container {
			border-top-left-radius: 40rpx;
			border-top-right-radius: 40rpx;
			background-color: #FFFFFF;
		}

		&-item-card {
			width: 210rpx;
			height: 210rpx;
			border: 6rpx solid #F9F9F9;
			border-radius: 30rpx;

			&-active {
				border-color: #FD1E43
			}
		}
	}

	.pay {
		&-item {
			padding: 26rpx 38rpx 26rpx 56rpx;
			border-bottom: 2rpx solid #f9f9f9;
		}
	}
</style>
